<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侠客影院-在线购票网站</title>
    <link rel="stylesheet" href="css/style/index.css">
    <link rel="stylesheet" href="css/pubiic/head_and_footer.css">
    <link rel="shortcut icon" href="侠.ico" type="image/x-icon">
    <script src="js/jquery-3.3.1.min.js"></script>
</head>

<body class="black-theme">
    <!-- 头部 -->
    <header id="Top">
        <nav>
            <article class="wrapper">
                <!-- logo -->
                <div class="header-logo flex-col-4">
                    <a href="index.html" title="侠客影院">
                        <img src="img/Logo.png" title="侠客影院">
                    </a>
                </div>
                <!-- 左导航 -->
                <ul class="nav-left flex-col-8">
                    <li class="nav-index-btn nav-current"><a href="index.html">首页</a></li>
                    <li><a href="productList.html">电影</a></li>
                    <li><a href="#">影院</a></li>
                    <li><a href="newsList.html">热点</a></li>
                    <li><a href="#">榜单</a></li>
                    <li class="nav-vip-btn"><a href="#">会员中心</a>
                    </li>
                    <li class="nav-drop-down-btn" style="padding-right: 0"><i class="iconfont icon-xiala-"></i>
                    </li>
                </ul>
                <!-- 占位盒子 -->
                <div class="placeholder"></div>
                <!-- 右内容 -->
                <div class="nav-right flex-col-12">
                    <!-- 搜索框 -->
                    <div class="search-box">
                        <div class="search">
                            <div class="icon-search-960" style="display: none"><i class="iconfont icon-sousuo"></i>
                            </div>
                            <form id="nav-search" class="black-theme__search-focus" action="" method="get">
                                <input type="text" name="searchMovie" id="" placeholder="搜索电影">
                                <button class="header-search-btn"><i class="iconfont icon-sousuo"></i></button>
                            </form>
                        </div>
                    </div>
                    <div class="hide-icon" style="display: none;">
                        <div class="btn-category">
                            <button class="iconfont icon-sousuo"></button>
                            <button class="iconfont icon-fenlei"></button>
                        </div>
                    </div>
                    <!-- 导航项目 -->
                    <div class="mobile">
                        <a href="#">
                            <i class="iconfont icon-shouji"></i>
                            <span>手机端</span>
                        </a>
                    </div>
                    <div class="view-history">
                        <a href="#">
                            <i class="iconfont icon-lishijilu_huaban"></i>
                            <span>观影记录</span>
                        </a>
                    </div>
                    <div class="ticket-history">
                        <a href="cart.html">
                            <i class="iconfont icon-goupiao"></i>
                            <span>购票订单</span>
                        </a>
                    </div>
                    <!-- 用户 -->
                    <div class="header-usertxt">
                        <div class="header-login">
                            <a href="login.html">登录</a>
                        </div>
                        <i class="header-usertxt-icon iconfont icon-xiala">
                        </i>
                        <div class="header-login_menu" style="display: none;">
                            <a href="register.html">注册</a>
                            <a href="admin/login.html">管理员</a>
                        </div>
                    </div>
                    <div class="header-user">
                        <a href="#" class="header-userImg"
                            style="background: url(img/透明头像.png) center center no-repeat;">
                            <i class="iconfont icon-weibiaoti1"></i></a>
                    </div>
                    <div class="header-position">
                        <a href="#">
                            <i class="iconfont icon-weizhi"></i>
                            <span>清远</span>
                        </a>
                    </div>
                </div>
            </article>
        </nav>
        <!-- 背景颜色模糊 -->
        <div id="header-bg" class="header-bg-blur__black"></div>
    </header>
    <!-- banner模块 -->
    <div id="banner">
        <div class="content wrapper">
            <!-- 电影banner -->
            <div class="movie-advert">
                <!-- <li><img src="img/首页banner.jpg" title="阿凡达2·水之道电影海报"></li> -->
                <video id="video" src="video/afanda-4k.mp4" poster="img/Banner/阿凡达.jpg" muted class="myvid"></video>
                <video id="video" src="video/君の名は.mp4" poster="img/Banner/你的名字.jpg" muted></video>
                <video id="video" src="video/独行月球.mp4" poster="img/Banner/独行月球.jpg" muted></video>
                <video id="video" src="video/杨戬.mp4" poster="img/Banner/新神榜：杨戬.jpg" muted></video>
            </div>
            <!-- banner信息 -->
            <ul class="movie-info-wrap">
                <li class="info">
                    <div class="item-box">
                        <a href="#">
                            <img src="img/Banner/阿凡达Logo.png" alt="阿凡达2·水之道" class="banner-title">
                        </a>
                        <span>卡梅隆 动作 科幻 惊悚 冒险</span>
                        <div class="button">
                            <a href="#">预约售票</a>
                            <div class="sound-btn">
                                <span class="iconfont icon-jingyin .sound-btn-out" title="打开声音"></span>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-box">
                        <a href="#">
                            <img src="img/Banner/你的名字Logo.png" alt="你的名字" class="banner-title">
                        </a>
                        <span>新海诚 剧情 爱情 动画</span>
                        <div class="button">
                            <a href="#">会员观看</a>
                            <div class="sound-btn">
                                <span class="iconfont icon-jingyin .sound-btn-out" title="打开声音"></span>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-box">
                        <a href="#">
                            <img src="img/Banner/独行月球Logo.png" alt="独行月球" class="banner-title">
                        </a>
                        <span>沈腾 马丽 喜剧 科幻</span>
                        <div class="button">
                            <a href="#">特惠购票</a>
                            <div class="sound-btn">
                                <span class="iconfont icon-jingyin .sound-btn-out" title="打开声音"></span>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-box">
                        <a href="#">
                            <img src="img/Banner/新神榜：杨戬Logo.png" alt="新神榜：杨戬" class="banner-title">
                        </a>
                        <span>动作 动画 奇幻 冒险</span>
                        <div class="button">
                            <a href="#">特惠购票</a>
                            <div class="sound-btn">
                                <span class="iconfont icon-jingyin .sound-btn-out" title="打开声音"></span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <!-- banner海报 -->
            <div class="banner-poster">
                <a href="#" class="poster">
                    <img src="img/电影封面/阿凡达：水之道.jpg" alt="阿凡达：水之道电影海报" title="阿凡达：水之道">
                    <span>阿凡达：水之道</span>
                </a>
                <a href="#">
                    <img src="img/电影封面/你的名字.jpg" alt="你的名字电影海报" title="你的名字">
                    <span>你的名字</span>
                </a>
                <a href="#">
                    <img src="img/电影封面/独行月球.jpg" alt="独行月球电影海报" title="独行月球">
                    <span>独行月球</span>
                </a>
                <a href="#">
                    <img src="img/电影封面/新神榜：杨戬.jpg" alt="新神榜：杨戬电影海报" title="新神榜：杨戬">
                    <span>新神榜：杨戬</span>
                </a>
            </div>
            <!-- banner阴影 -->
            <div class="shade-left"></div>
            <div class="shade-right"></div>
            <div class="shade-bottom"></div>
        </div>
    </div>
    <!-- 主体内容 -->
    <main>
        <div class="wrapper">
            <div id="movie-content">
                <!-- 主要内容 -->
                <div class="article">
                    <!-- 正在热播模块 -->
                    <div class="hot-panel">
                        <!-- 模块标题 -->
                        <div class="panel-header">
                            <div class="panel-title">
                                正在热映
                                <span class="panel-title-en title-txtbg-gradColor">Hot&nbsp;Screen</span>
                            </div>
                            <div class="panel-more">
                                <a href="#">更多<i class="iconfont icon-xiangyou1"></i></a>
                            </div>
                        </div>
                        <!-- 模块内容 -->
                        <div class="panel-content">
                            <!-- 电影列表 -->
                            <dl class="movie-list flex-row">
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#" class="">
                                            <div class="movie-poster movie-floatCard">
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/外太空的莫扎特.jpg" title="外太空的莫扎特" alt="外太空的莫扎特电影海报"
                                                    class="movie-poster-img">
                                                <div class="movie-title">
                                                    外太空的莫扎特
                                                    <div class="movie-score">
                                                        <span class="integer">9.</span>
                                                        <span class="fraction">1</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#">立即购票</a>
                                            <i class="iconfont icon-dianyingpiao1 film-icon"></i>
                                        </div>
                                    </div>
                                </dd>
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#" class="">
                                            <div class="movie-poster movie-floatCard">
                                                <div class="IMAX-3D"></div>
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/独行月球.jpg" title="独行月球" alt="独行月球电影海报"
                                                    class="movie-poster-img">
                                                <div class="movie-title">
                                                    独行月球
                                                    <div class="movie-score">
                                                        <span class="integer">9.</span>
                                                        <span class="fraction">0</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#">立即购票</a>
                                            <i class="iconfont icon-dianyingpiao1 film-icon"></i>
                                        </div>
                                    </div>
                                </dd>
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#" class="">
                                            <div class="movie-poster movie-floatCard">
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/名侦探柯南：万圣节的新娘.jpg" title="名侦探柯南：万圣节的新娘"
                                                    alt="名侦探柯南：万圣节的新娘电影海报" class="movie-poster-img">
                                                <div class="movie-title">
                                                    名侦探柯南：万圣节的新娘
                                                    <div class="movie-score">
                                                        <span class="integer">9.</span>
                                                        <span class="fraction">6</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#">立即购票</a>
                                            <i class="iconfont icon-dianyingpiao1 film-icon"></i>
                                        </div>
                                    </div>
                                </dd>
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#" class="">
                                            <div class="movie-poster movie-floatCard">
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/坠落.jpg" title="坠落" alt="坠落电影海报"
                                                    class="movie-poster-img">
                                                <div class="movie-title">
                                                    坠落
                                                    <div class="movie-score">
                                                        <span class="integer">8.</span>
                                                        <span class="fraction">8</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#">立即购票</a>
                                            <i class="iconfont icon-dianyingpiao1 film-icon"></i>
                                        </div>
                                    </div>
                                </dd>
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#">
                                            <div class="movie-poster movie-floatCard">
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/万里归途.jpg" title="万里归途" alt="万里归途电影海报"
                                                    class="movie-poster-img">
                                                <div class="movie-title">
                                                    万里归途
                                                    <div class="movie-score">
                                                        <span class="integer">8.</span>
                                                        <span class="fraction">9</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#">立即购票</a>
                                            <i class="iconfont icon-dianyingpiao1 film-icon"></i>
                                        </div>
                                    </div>
                                </dd>
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#">
                                            <div class="movie-poster movie-floatCard">
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/忍者神龟：崛起.jpg" title="忍者神龟：崛起" alt="忍者神龟：崛起电影海报"
                                                    class="movie-poster-img">
                                                <div class="movie-title">
                                                    忍者神龟：崛起
                                                    <div class="movie-score">
                                                        <span class="integer">9.</span>
                                                        <span class="fraction">0</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#">立即购票</a>
                                            <i class="iconfont icon-dianyingpiao1 film-icon"></i>
                                        </div>
                                    </div>
                                </dd>
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#" class="">
                                            <div class="movie-poster movie-floatCard">
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/放牛班的春天.jpg" title="放牛班的春天" alt="放牛班的春天电影海报"
                                                    class="movie-poster-img">
                                                <div class="movie-title">
                                                    放牛班的春天
                                                    <div class="movie-score">
                                                        <span class="integer">8.</span>
                                                        <span class="fraction">7</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#">立即购票</a>
                                            <i class="iconfont icon-dianyingpiao1 film-icon"></i>
                                        </div>
                                    </div>
                                </dd>
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#" class="">
                                            <div class="movie-poster movie-floatCard">
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/红海行动.jpg" title="红海行动" alt="红海行动电影海报"
                                                    class="movie-poster-img">
                                                <div class="movie-title">
                                                    红海行动
                                                    <div class="movie-score">
                                                        <span class="integer">9.</span>
                                                        <span class="fraction">0</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#">立即购票</a>
                                            <i class="iconfont icon-dianyingpiao1 film-icon"></i>
                                        </div>
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                    <!-- 即将上映模块 -->
                    <div class="soon-panel">
                        <!-- 模块标题 -->
                        <div class="panel-header">
                            <div class="panel-title">
                                即将上映
                                <span class="panel-title-en title-txtbg-gradColor">Release Soon</span>
                            </div>
                            <div class="panel-more">
                                <a href="#">更多<i class="iconfont icon-xiangyou1"></i></a>
                            </div>
                        </div>
                        <!-- 模块内容 -->
                        <div class="panel-content">
                            <!-- 电影列表 -->
                            <dl class="movie-list flex-row">
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#">
                                            <div class="movie-poster  movie-bigContentCard">
                                                <div class="IMAX-3D"></div>
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/阿凡达：水之道.jpg" title="阿凡达：水之道" alt="阿凡达：水之道电影海报"
                                                    class="movie-poster-img">
                                                <div class="movie-title">
                                                    阿凡达：水之道
                                                </div>
                                                <!-- 电影内容 -->
                                                <div class="movie-content">
                                                    <h1>阿凡达：水之道</h1>
                                                    <div class="soon-time">上映时间：2023-01-23</div>
                                                    <div class="thinkSee">2800人想看</div>
                                                    <p class="introduce">
                                                        简介：《阿凡达2》的剧情承接自第一部的5年之后。曾经的地球残疾军人杰克·萨利，如今已经是潘多拉星球纳美族一方部族的族长，并且与爱妻娜塔莉共同育有一对可爱的儿女，日子过得平淡而充实。然而某天，有个部族的兄弟在海岸附近巡逻时遭到利器割喉身亡。通过现场勘查，以及作为前海军陆战队员的敏锐直觉，杰克判断已经有人类的阿凡达混入了部落……
                                                    </p>
                                                    <div class="btn_link">
                                                        <button class="flash-btn">预约购票</button>
                                                        <a href="http://baidu.com/">预告片</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                        <div class="movie-detail">
                                            <a href="#" class="trailer-watch">观看预告片</a>
                                        </div>
                                    </div>
                                </dd>
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#">
                                            <div class="movie-poster  movie-bigContentCard">
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/海贼王：红发歌姬.jpg" title="海贼王：红发歌姬" alt="海贼王：红发歌姬电影海报"
                                                    class="movie-poster-img">
                                                <div class="movie-title">
                                                    海贼王：红发歌姬
                                                </div>
                                                <!-- 电影内容 -->
                                                <div class="movie-content">
                                                    <h1>海贼王：红发歌姬</h1>
                                                    <div class="soon-time">上映时间：2022-12-01</div>
                                                    <div class="thinkSee">2800人想看</div>
                                                    <p class="introduce">
                                                        简介：令全世界为之疯狂的歌姬·乌塔，她的身世成谜，歌声却被誉为“来自别的次元”。而这次，她将举办演唱会并第一次露出庐山真面目。为了欣赏她的歌声，路飞率领的草帽一伙，以及世界各地的歌迷都汇聚在会场之中。全世界备受瞩目的歌声即将在此回荡。而故事就在乌塔是“杰克斯的女儿”这一令人震惊的发现中拉开帷幕！
                                                    </p>
                                                    <div class="btn_link">
                                                        <button class="flash-btn">预约购票</button>
                                                        <a href="http://baidu.com/">预告片</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#" class="trailer-watch">观看预告片</a>
                                        </div>
                                    </div>
                                </dd>
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#">
                                            <div class="movie-poster  movie-bigContentCard">
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/2067.jpg" title="2067" alt="2067电影海报"
                                                    class="movie-poster-img">
                                                <div class="movie-title">
                                                    2067
                                                </div>
                                                <!-- 电影内容 -->
                                                <div class="movie-content">
                                                    <h1>2067</h1>
                                                    <div class="soon-time">上映时间：2022-12-01</div>
                                                    <div class="thinkSee">2800人想看</div>
                                                    <p class="introduce">
                                                        简介：讲述在地球上的森林、野生动物和植物被气候变化破坏后，人类展望未来寻找答案的故事
                                                    </p>
                                                    <div class="btn_link">
                                                        <button class="flash-btn">预约购票</button>
                                                        <a href="http://baidu.com/">预告片</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#" class="trailer-watch">观看预告片</a>
                                        </div>
                                    </div>
                                </dd>
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#">
                                            <div class="movie-poster  movie-bigContentCard">
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/天虎突击队.jpg" title="疾速逃生" alt="疾速逃生电影海报"
                                                    class="movie-poster-img">
                                                <div class="movie-title">
                                                    疾速逃生
                                                </div>
                                                <!-- 电影内容 -->
                                                <div class="movie-content">
                                                    <h1>疾速逃生</h1>
                                                    <div class="soon-time">上映时间：2022-12-01</div>
                                                    <div class="thinkSee">2800人想看</div>
                                                    <p class="introduce">
                                                        简介：因一辆运送化学品的运输车发生毒气泄漏，整个城市瞬间被毒雾包围。正在参加同学聚会的退役军人萧风意外邂逅医生前女友苏月，面对毒气的威胁，二人决定利用自身技能帮助被困市民逃生，他们一次次放弃能够离开的机会，为了生存只能不断向高处攀爬，最后却被困高楼楼顶陷入绝境……
                                                    </p>
                                                    <div class="btn_link">
                                                        <button class="flash-btn">预约购票</button>
                                                        <a href="http://baidu.com/">预告片</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#" class="trailer-watch">观看预告片</a>
                                        </div>
                                    </div>
                                </dd>
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#">
                                            <div class="movie-poster  movie-bigContentCard">
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/流浪地球2.jpg" title="流浪地球2" alt="流浪地球2电影海报"
                                                    class="movie-poster-img">
                                                <div class="movie-title">
                                                    流浪地球2
                                                </div>
                                                <!-- 电影内容 -->
                                                <div class="movie-content">
                                                    <h1>流浪地球2</h1>
                                                    <div class="soon-time">上映时间：2023-01-22</div>
                                                    <div class="thinkSee">2800人想看</div>
                                                    <p class="introduce">
                                                        简介：太阳即将毁灭，人类在地球表面建造出巨大的推进器，寻找新的家园。然而宇宙之路危机四伏，为了拯救地球，流浪地球时代的年轻人再次挺身而出，展开争分夺秒的生死之战。
                                                    </p>
                                                    <div class="btn_link">
                                                        <button class="flash-btn">预约购票</button>
                                                        <a href="http://baidu.com/">预告片</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#" class="trailer-watch">观看预告片</a>
                                        </div>
                                    </div>
                                </dd>
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#">
                                            <div class="movie-poster  movie-bigContentCard">
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/铃芽户缔.jpg" title="铃芽户缔" alt="铃芽户缔电影海报"
                                                    class="movie-poster-img">
                                                <div class="movie-title">
                                                    铃芽户缔
                                                </div>
                                                <!-- 电影内容 -->
                                                <div class="movie-content">
                                                    <h1>铃芽户缔</h1>
                                                    <div class="soon-time">上映时间：2022-12-01</div>
                                                    <div class="thinkSee">2800人想看</div>
                                                    <p class="introduce">
                                                        简介：故事讲述生活在日本九州田舍的17岁少女・铃芽遇见了为了寻找“门”而踏上旅途的青年。追随着青年的脚步，铃芽来到了山上一片废墟之地，在这里静静伫立着一扇古老的门，仿佛是坍塌中存留的唯一遗迹。铃芽仿佛被什么吸引了一般，将手伸向了那扇门…
                                                        不久之后，日本各地的门开始一扇一扇地打开。据说，开着的门必须关上，否则灾祸将会从门的那一边降临于现世。
                                                    </p>
                                                    <div class="btn_link">
                                                        <button class="flash-btn">预约购票</button>
                                                        <a href="http://baidu.com/">预告片</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#" class="trailer-watch">观看预告片</a>
                                        </div>
                                    </div>
                                </dd>
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#">
                                            <div class="movie-poster  movie-bigContentCard">
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/龙马精神.jpg" title="龙马精神" alt="龙马精神电影海报"
                                                    class="movie-poster-img">
                                                <div class="movie-title">
                                                    龙马精神
                                                </div>
                                                <!-- 电影内容 -->
                                                <div class="movie-content">
                                                    <h1>龙马精神</h1>
                                                    <div class="soon-time">上映时间：2022-12-31</div>
                                                    <div class="thinkSee">2800人想看</div>
                                                    <p class="introduce">
                                                        简介：生活落魄的武行老罗（成龙
                                                        饰）有一匹爱马“赤兔”，他一直想把它培养成片场的动作明星，不料却深陷官司，只能求助多年未见的女儿小宝（刘浩存
                                                        饰）和她的律师男友乃华（郭麒麟
                                                        饰）。小宝一边帮老罗打官司，一边劝说他不要带着赤兔玩命做危险动作，老罗不顾女儿反对继续偷偷训练赤兔，同时又对准女婿乃华展开了各种考验……
                                                    </p>
                                                    <div class="btn_link">
                                                        <button class="flash-btn">预约购票</button>
                                                        <a href="http://baidu.com/">预告片</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#" class="trailer-watch">观看预告片</a>
                                        </div>
                                    </div>
                                </dd>
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#">
                                            <div class="movie-poster  movie-bigContentCard">
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/熊出没·伴我“熊芯”.jpg" title="熊出没·伴我“熊芯”"
                                                    alt="熊出没·伴我“熊芯”电影海报" class="movie-poster-img">
                                                <div class="movie-title">
                                                    熊出没·伴我“熊芯”
                                                </div>
                                                <!-- 电影内容 -->
                                                <div class="movie-content">
                                                    <h1>熊出没·伴我“熊芯”</h1>
                                                    <div class="soon-time">上映时间：2023-01-22</div>
                                                    <div class="thinkSee">2800人想看</div>
                                                    <p class="introduce">
                                                        简介：一个普通的森林夜晚，对小熊大、小熊二宠爱有加的熊妈妈，在一场大火后离开了他们，两熊伤心不已……转眼多年过去，光头强带熊大熊二前往振兴岛参观机器人研究所，却意外得到了熊妈妈的线索，为此熊大、熊二一路探寻……熊妈当年为何不告而别？两熊最终是否能找到妈妈？迷雾重重的背后还有怎样的故事？一切谜团等待揭晓。
                                                    </p>
                                                    <div class="btn_link">
                                                        <button class="flash-btn">预约购票</button>
                                                        <a href="http://baidu.com/">预告片</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#" class="trailer-watch">观看预告片</a>
                                        </div>
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                    <!-- 经典影片模块 -->
                    <div class="classic-panel">
                        <!-- 模块标题 -->
                        <div class="panel-header">
                            <div class="panel-title">
                                经典影片
                                <span class="panel-title-en title-txtbg-gradColor">Classic&nbsp;Film</span>
                            </div>
                            <div class="panel-more">
                                <a href="#">科幻</a>
                                <a href="#">喜剧</a>
                                <a href="#">动作</a>
                                <a href="#">爱情</a>
                                <a href="#">动画</a>
                                <a href="#">更多<i class="iconfont icon-xiangyou1"></i></a>
                            </div>
                        </div>
                        <!-- 模块内容 -->
                        <div class="panel-content">
                            <!-- 电影列表 -->
                            <dl class="movie-list flex-row">
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#" class="">
                                            <div class="movie-poster movie-shadeCard">
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/你的名字.jpg" title="你的名字" alt="你的名字电影海报"
                                                    class="movie-poster-img">
                                                <div class="movie-title">
                                                    你的名字
                                                    <div class="movie-score">
                                                        <span class="integer">9.</span>
                                                        <span class="fraction">1</span>
                                                    </div>
                                                </div>
                                                <div class="movie-playPad">
                                                    <i class="iconfont icon-24gf-playCircle"></i>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#">会员免费看</a>
                                            <i class="iconfont icon-dianying1 film-icon"></i>
                                        </div>
                                    </div>
                                </dd>
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#" class="">
                                            <div class="movie-poster movie-shadeCard">
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/功夫.jpg" title="功夫" alt="功夫电影海报"
                                                    class="movie-poster-img">
                                                <div class="movie-title">
                                                    功夫
                                                    <div class="movie-score">
                                                        <span class="integer">9.</span>
                                                        <span class="fraction">0</span>
                                                    </div>
                                                </div>
                                                <div class="movie-playPad">
                                                    <i class="iconfont icon-24gf-playCircle"></i>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#">会员免费看</a>
                                            <i class="iconfont icon-dianying1 film-icon"></i>
                                        </div>
                                    </div>
                                </dd>
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#" class="">
                                            <div class="movie-poster movie-shadeCard">
                                                <div class="IMAX-2D"></div>
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/泰坦尼克号.jpg" title="泰坦尼克号" alt="泰坦尼克号电影海报"
                                                    class="movie-poster-img">
                                                <div class="movie-title">
                                                    泰坦尼克号
                                                    <div class="movie-score">
                                                        <span class="integer">9.</span>
                                                        <span class="fraction">6</span>
                                                    </div>
                                                </div>
                                                <div class="movie-playPad">
                                                    <i class="iconfont icon-24gf-playCircle"></i>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#">会员免费看</a>
                                            <i class="iconfont icon-dianying1 film-icon"></i>
                                        </div>
                                    </div>
                                </dd>
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#" class="">
                                            <div class="movie-poster movie-shadeCard">
                                                <div class="I-3D"></div>
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/星际穿越.jpg" title="星际穿越" alt="星际穿越电影海报"
                                                    class="movie-poster-img">
                                                <div class="movie-title">
                                                    星际穿越
                                                    <div class="movie-score">
                                                        <span class="integer">8.</span>
                                                        <span class="fraction">8</span>
                                                    </div>
                                                </div>
                                                <div class="movie-playPad">
                                                    <i class="iconfont icon-24gf-playCircle"></i>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#">会员免费看</a>
                                            <i class="iconfont icon-dianying1 film-icon"></i>
                                        </div>
                                    </div>
                                </dd>
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#">
                                            <div class="movie-poster movie-shadeCard">
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/楚门的世界.jpg" title="楚门的世界" alt="楚门的世界电影海报"
                                                    class="movie-poster-img">
                                                <div class="movie-title">
                                                    楚门的世界
                                                    <div class="movie-score">
                                                        <span class="integer">8.</span>
                                                        <span class="fraction">9</span>
                                                    </div>
                                                </div>
                                                <div class="movie-playPad">
                                                    <i class="iconfont icon-24gf-playCircle"></i>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#">会员免费看</a>
                                            <i class="iconfont icon-dianying1 film-icon"></i>
                                        </div>
                                    </div>
                                </dd>
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#">
                                            <div class="movie-poster movie-shadeCard">
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/蝙蝠侠：黑暗骑士.jpg" title="蝙蝠侠：黑暗骑士" alt="蝙蝠侠：黑暗骑士电影海报"
                                                    class="movie-poster-img">
                                                <div class="movie-title">
                                                    蝙蝠侠：黑暗骑士
                                                    <div class="movie-score">
                                                        <span class="integer">9.</span>
                                                        <span class="fraction">0</span>
                                                    </div>
                                                </div>
                                                <div class="movie-playPad">
                                                    <i class="iconfont icon-24gf-playCircle"></i>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#">会员免费看</a>
                                            <i class="iconfont icon-dianying1 film-icon"></i>
                                        </div>
                                    </div>
                                </dd>
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#" class="">
                                            <div class="movie-poster movie-shadeCard">
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/千与千寻.jpg" title="千与千寻" alt="千与千寻电影海报"
                                                    class="movie-poster-img">
                                                <div class="movie-title">
                                                    千与千寻
                                                    <div class="movie-score">
                                                        <span class="integer">8.</span>
                                                        <span class="fraction">7</span>
                                                    </div>
                                                </div>
                                                <div class="movie-playPad">
                                                    <i class="iconfont icon-24gf-playCircle"></i>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#">会员免费看</a>
                                            <i class="iconfont icon-dianying1 film-icon"></i>
                                        </div>
                                    </div>
                                </dd>
                                <dd class="flex-col-6">
                                    <div class="movie-item">
                                        <!-- 电影海报 -->
                                        <a href="#" class="">
                                            <div class="movie-poster movie-shadeCard">
                                                <!-- <img src="" alt="" class="poster-defult"> -->
                                                <img src="img/电影封面/肖申克的救赎.jpg" title="肖申克的救赎" alt="肖申克的救赎电影海报"
                                                    class="movie-poster-img">
                                                <div class="movie-title">
                                                    肖申克的救赎
                                                    <div class="movie-score">
                                                        <span class="integer">9.</span>
                                                        <span class="fraction">0</span>
                                                    </div>
                                                </div>
                                                <div class="movie-playPad">
                                                    <i class="iconfont icon-24gf-playCircle"></i>
                                                </div>
                                            </div>
                                        </a>
                                        <!-- 购票细节 -->
                                        <div class="movie-detail">
                                            <a href="#">会员免费看</a>
                                            <i class="iconfont icon-dianying1 film-icon"></i>
                                        </div>
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <!-- 侧分栏 -->
                <div class="asidebar">
                    <div class="rank-lists">
                        <div class="today-TickHouse">
                            <div class="rank-list-title">
                                <i class="iconfont icon-dianyingpiao2"></i>今日票房
                                <!-- <span>查看完整</span> -->
                            </div>
                            <ul class="ranking-box">
                                <li class="ranking-item ranking-index-1 ranking-top">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index iconfont icon-guanjun"></span>
                                        <span class="rangking-name">海贼王：红发歌姬</span>
                                        <span class="rangking-num-info">1300.12万</span>
                                    </a>
                                </li>
                                <li class="ranking-item ranking-index-2">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">2</span>
                                        <span class="rangking-name">独行月球</span>
                                        <span class="rangking-num-info">120.13万</span>
                                    </a>
                                </li>
                                <li class="ranking-item ranking-index-3">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">3</span>
                                        <span class="rangking-name">名侦探柯南：万圣节的新娘</span>
                                        <span class="rangking-num-info">68.53万</span>
                                    </a>
                                </li>
                                <li class="ranking-item ranking-index-4">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">4</span>
                                        <span class="rangking-name">放牛班的春天</span>
                                        <span class="rangking-num-info">40.1万</span>
                                    </a>
                                </li>
                                <li class="ranking-item ranking-index-5">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">5</span>
                                        <span class="rangking-name">您好，北京</span>
                                        <span class="rangking-num-info">38.36万</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="hot-News">
                            <div class="rank-list-title">
                                <i class="iconfont icon-redian"></i>热点咨讯
                            </div>
                            <ul class="ranking-box">
                                <li class="ranking-item ranking-index-1 ranking-top">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">1</span>
                                        <span class="rangking-name">4K修复版《放牛班的春天》今日上映，影史经典银幕再现</span>
                                    </a>
                                </li>
                                <li class="ranking-item ranking-index-2">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">2</span>
                                        <span class="rangking-name">曹茜茜执导《您好，北京》中国香港感动献映，共祝祖国繁荣昌盛</span>
                                    </a>
                                </li>
                                <li class="ranking-item ranking-index-3">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">3</span>
                                        <span class="rangking-name">《放牛班的春天》上映倒计时一天，治愈系经典四大看点全解锁</span>
                                    </a>
                                </li>
                                <li class="ranking-item ranking-index-4">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">4</span>
                                        <span class="rangking-name">逆天改命找回希望，科幻电影《2067》12月2日上映</span>
                                    </a>
                                </li>
                                <li class="ranking-item ranking-index-5">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">5</span>
                                        <span class="rangking-name">动画电影《橡树餐厅》12月31日欢乐上映！</span>
                                    </a>
                                </li>
                                <li class="ranking-item ranking-index-6">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">6</span>
                                        <span class="rangking-name">《福尔摩斯小姐：伦敦厄运》终极预告刺激来袭</span>
                                    </a>
                                </li>
                                <li class="ranking-item ranking-index-7">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">7</span>
                                        <span class="rangking-name">《新神榜：杨戬》曝系列联动彩蛋，哪吒孙悟空惊喜现身</span>
                                    </a>
                                </li>
                                <li class="ranking-item ranking-index-8">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">8</span>
                                        <span class="rangking-name">《沼泽深处的女孩》发“法庭陈述”片段，辩护律师灵魂拷问反击偏见</span>
                                    </a>
                                </li>
                                <li class="ranking-item ranking-index-9">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">9</span>
                                        <span class="rangking-name">电影《拯救嫌疑人》发布先导海报，全阵容曝光共同“寻觅真相”</span>
                                    </a>
                                </li>
                                <li class="ranking-item ranking-index-10">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">10</span>
                                        <span class="rangking-name">徐峥周迅易烊千玺众影人集体发声，鱼花塘全国路演持续进行中</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="highScore-movie">
                            <div class="rank-list-title">
                                <i class="iconfont icon-fangyingji"></i>高分电影
                            </div>
                            <ul class="ranking-box">
                                <li class="ranking-item ranking-index-1 ranking-top">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index iconfont icon-guanjun"></span>
                                        <span class="rangking-name">肖申克的救赎</span>
                                        <span class="rangking-num-info">9.7分</span>
                                    </a>
                                </li>
                                <li class="ranking-item ranking-index-2">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">2</span>
                                        <span class="rangking-name">霸王别姬</span>
                                        <span class="rangking-num-info">9.6分</span>
                                    </a>
                                </li>
                                <li class="ranking-item ranking-index-3">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">3</span>
                                        <span class="rangking-name">辛德勒的名单</span>
                                        <span class="rangking-num-info">9.6分</span>
                                    </a>
                                </li>
                                <li class="ranking-item ranking-index-4">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">4</span>
                                        <span class="rangking-name">美丽人生</span>
                                        <span class="rangking-num-info">9.6分</span>
                                    </a>
                                </li>
                                <li class="ranking-item ranking-index-5">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">5</span>
                                        <span class="rangking-name">阿甘正传</span>
                                        <span class="rangking-num-info">9.5分</span>
                                    </a>
                                </li>
                                <li class="ranking-item ranking-index-6">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">6</span>
                                        <span class="rangking-name">这个杀手不太冷</span>
                                        <span class="rangking-num-info">9.4分</span>
                                    </a>
                                </li>
                                <li class="ranking-item ranking-index-7">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">7</span>
                                        <span class="rangking-name">千与千寻</span>
                                        <span class="rangking-num-info">9.4分</span>
                                    </a>
                                </li>
                                <li class="ranking-item ranking-index-8">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">8</span>
                                        <span class="rangking-name">放牛班的春天
                                        </span>
                                        <span class="rangking-num-info">9.4分</span>
                                    </a>
                                </li>
                                <li class="ranking-item ranking-index-9">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">9</span>
                                        <span class="rangking-name">星际穿越</span>
                                        <span class="rangking-num-info">9.4分</span>
                                    </a>
                                </li>
                                <li class="ranking-item ranking-index-10">
                                    <a href="#" class="ranking-link">
                                        <span class="rangking-index">10</span>
                                        <span class="rangking-name">盗墓空间</span>
                                        <span class="rangking-num-info">9.4分</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <!-- 底部 -->
    <footer>
        <div id="footer-bg" class="footer-bg-black">
            <div class="footer-layout">
                <!-- 底部上盒子 -->
                <div class="footer-top-box">
                    <!-- 列表链接模块 -->
                    <div class="links-list-box flex-col-24">
                        <!-- 第一个列表 -->
                        <ul class="flex-col-6 links-list_Member">
                            <li class="footer-link-item"><a href="#">会员礼品卡</a></li>
                            <li class="footer-link-item"><a href="#">企业团购</a></li>
                            <li class="footer-link-item"><a href="#">注册侠客会员</a></li>
                        </ul>
                        <!-- 第二个列表 -->
                        <ul class="flex-col-6 links-list_Help">
                            <li class="footer-link-header"><span>获得帮助</span><i
                                    class="iconfont icon-xiangxia2 footer_drop-down-btn"></i></li>
                            <ul class="footer_drop-down-menu">
                                <li class="footer-link"><a href="#">订单状态</a></li>
                                <li class="footer-link"><a href="#">退票改签</a></li>
                                <li class="footer-link"><a href="#">付款选项</a></li>
                                <li class="footer-link"><a href="#">账号异常</a></li>
                                <li class="footer-link"><a href="#">联系我们</a></li>
                            </ul>
                        </ul>
                        <!-- 第三个列表 -->
                        <ul class="flex-col-6 links-list_About">
                            <li class="footer-link-header"><span>关于侠客</span><i
                                    class="iconfont icon-xiangxia2 footer_drop-down-btn"></i></li>
                            <ul class="footer_drop-down-menu">
                                <li class="footer-link"><a href="newsList.html">新闻咨讯</a></li>
                                <li class="footer-link"><a href="#">制作团队</a></li>
                                <li class="footer-link"><a href="#">招贤纳士</a></li>
                            </ul>
                        </ul>
                        <!-- 图标链接模块 -->
                        <div class="icon-ser-box">
                            <button class="btn-weixin" title="官方微信"><i class="iconfont icon-weixin"></i></button>
                            <a href="#" class="btn-weibo" title="官方微博"><i class="iconfont icon-weibo"></i></a>
                            <a href="#" class="btn-mail" title="官方邮箱"><i class="iconfont icon-tousujianyi"></i></a>
                            <a href="https://github.com" class="btn-github" title="https://github.com"><i
                                    class="iconfont icon-github"></i></a>
                        </div>
                    </div>
                </div>
                <!-- 底部下盒子 -->
                <div class="footer-bottom-box flex-row">
                    <!-- 版权模块 -->
                    <div class="footer-bottom-left-copyright flex-col-12">
                        <div class="city-pos">
                            <i class="iconfont icon-weizhi"></i>
                            <span>清远市</span>
                        </div>
                        <div class="copyright">
                            <p><i class="iconfont icon-banquan"></i>&nbsp;2022&nbsp;xiake.com,&nbsp;保留所有权利</p>
                        </div>
                    </div>
                    <!-- 机关模块 -->
                    <ul class="footer-bottom-right-menu flex-row flex-col-12">
                        <li><a href="#">用户协议</a></li>
                        <li><a href="#">使用条款</a></li>
                        <li><a href="#">销售条款</a></li>
                        <li><a href="#">隐私政策</a></li>
                        <li><a href="#">投诉反馈</a></li>
                        <li><a href="#">粤ICP备2021011111号-20</a></li>
                        <li class="derivation"><i class="iconfont icon-jurassic_school"></i><a
                                href="https://www.nhic.edu.cn/" target="_blank">南华工商学院</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
    <!-- 右侧固定图标列表 -->
    <div id="fixedGroup-icon" class="fixedGroup-blackBG">
        <ul>
            <li class="theme-switch-btn">
                <i class="iconfont icon-baitian-qing light-app">
                    <span>切换浅色外观<i class="iconfont icon-bofang"></i></span>
                </i>
                <i class="iconfont icon-yueliang dark-app">
                    <span>切换深色外观<i class="iconfont icon-bofang"></i></span>
                </i>
            </li>
            <li class="message">
                <a href="message.html" class="iconfont icon-xiaoxi">
                    <span>留言墙<i class="iconfont icon-bofang"></i></span>
                </a>
            </li>
            <li id="returnTop" style="display: none;">
                <div class="iconfont icon-huidaodingbu">
                    <span>返回顶部<i class="iconfont icon-bofang"></i></span>
                </div>
            </li>
        </ul>
    </div>
</body>
<script src="js/theme—switch.js"></script>
<script src="js/index.js"></script>
<script src="js/head-footer.js"></script>
<script src="js/vanilla-tilt.min.js"></script>
<script>
    // 浮动卡片
    VanillaTilt.init(document.querySelectorAll(".movie-floatCard"), {
        max: 25,
        speed: 400,
        glare: false,
        "max-glare": 1
    });
</script>

</html>